var searchBox = $('.form-control.search-box');

$(document).ready(function() {
	searchBox.liveSearch( {
		url:  app.baseUrl() + 'index.php/references/search',
		width: 330,
		onSearchCompleted: function(e) {
			var displayHtml = '';

			var data = [];

			try {
				data = JSON.parse(e.data);
			}
			catch(ex) {

			}

			if (data.length > 0) {
				displayHtml = '<table class="table table-hover" style="margin-top: 10px;">\n' +
							  '	<tbody>\n';

				for (i = 0; i < data.length; i++) {
					var row = data[i];
					var image = row.Image;
					var gender = row.Gender.toLowerCase().trim();
					
					if (image.trim() == '') {
						if (gender == 'sister') image = app.baseUrl() + 'img/sis.png';
						else image = app.baseUrl() + 'img/bro.png';
					}

					var fullName = '';

					if (gender == 'sister') fullName = 'Sis. ';
					else fullName = 'Bro. ';

					fullName += row.FirstName.trim() + ' ' + row.LastName.trim();

					displayHtml += '		<tr style="cursor: pointer;">\n' +
								   '			<td>\n' +
								   '				<img class="img-rounded" src="' + image + '" alt="' + fullName + '" style="width: 40px; height: 40px;">\n' +
								   '			</td>\n' +
								   '			<td>\n' +
								   '				<strong style="font-size: 14px;">' + fullName + '</strong><br />\n' +
								   '				<small class="text-muted" style="font-size: 11px;">' + row.Locality + ' <strong>&middot;</strong> ' + row.District + '</small>\n' +
								   '			</td>\n' +
								   '		</tr>\n';
				}

				displayHtml += '	</tbody>\n' +
							   '</table>\n';
			}
			else {
				displayHtml = '<strong style="font-size: 14px; margin: 5px;">No search result for "' + e.search + '"</strong>';
			}

			return displayHtml;
		}
	})
});